<template>
  <div class="theme-switcher">
    <!-- 桌面端主题切换器 -->
    <button
      v-if="!isMobile"
      @click="toggleTheme"
      :title="themeLabel"
      class="theme-toggle-btn"
      :class="{ 'theme-toggle-dark': isDark }"
    >
      <transition name="theme-icon" mode="out-in">
        <SunIcon v-if="isDark" key="sun" class="w-5 h-5" />
        <MoonIcon v-else key="moon" class="w-5 h-5" />
      </transition>
    </button>

    <!-- 移动端主题切换器 -->
    <div v-else class="mobile-theme-switcher">
      <label class="flex items-center space-x-3">
        <span class="text-sm font-medium text-theme-primary">
          {{ isDark ? '暗色模式' : '亮色模式' }}
        </span>
        <div class="relative">
          <input
            type="checkbox"
            :checked="isDark"
            @change="toggleTheme"
            class="sr-only"
          />
          <div
            class="toggle-track"
            :class="{ 'toggle-track-active': isDark }"
          >
            <div
              class="toggle-thumb"
              :class="{ 'toggle-thumb-active': isDark }"
            >
              <SunIcon v-if="!isDark" class="w-3 h-3 text-yellow-500" />
              <MoonIcon v-else class="w-3 h-3 text-blue-400" />
            </div>
          </div>
        </div>
      </label>
    </div>
  </div>
</template>

<script setup lang="ts">
import { SunIcon, MoonIcon } from '@heroicons/vue/24/outline'
import { useTheme, useBreakpoints } from '@/composables/useTheme'

const { isDark, toggleTheme, themeLabel } = useTheme()
const { isMobile } = useBreakpoints()
</script>

<style scoped>
.theme-switcher {
  @apply inline-flex items-center;
}

.theme-toggle-btn {
  @apply relative p-2 rounded-md border border-gray-300 dark:border-gray-600 
         bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300
         hover:bg-gray-50 dark:hover:bg-gray-700 
         focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2
         transition-all duration-300 transform hover:scale-105;
}

.theme-toggle-dark {
  @apply border-gray-600 bg-gray-800 text-gray-300;
}

.mobile-theme-switcher {
  @apply p-2;
}

.toggle-track {
  @apply w-12 h-6 bg-gray-200 rounded-full transition-colors duration-300 relative cursor-pointer;
}

.toggle-track-active {
  @apply bg-primary-500;
}

.toggle-thumb {
  @apply absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full 
         transition-transform duration-300 flex items-center justify-center shadow-sm;
}

.toggle-thumb-active {
  @apply transform translate-x-6;
}

/* 主题图标过渡动画 */
.theme-icon-enter-active,
.theme-icon-leave-active {
  transition: all 0.2s ease-in-out;
}

.theme-icon-enter-from {
  opacity: 0;
  transform: rotate(-180deg) scale(0.8);
}

.theme-icon-leave-to {
  opacity: 0;
  transform: rotate(180deg) scale(0.8);
}
</style>
